<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<!--
		Step #5
			- 읽어들인 페이지를 화면에 추가(20분)
			
		Step #4
			- 외부 페이지 로드(10분)
			
		Step #3
			- JS Ajax 구현을 위한 환경 설정 구성(10분)
			
		Step #2-1
			- 리팩토링 - 코드 구조화
			
		Step #2
			- 읽어들일 외부 페이지의 파일명 가져오기(20분)
		 	
		Step #1
			- 페이지 레이아웃 잡기
	-->		
	<style>
		body{
			font-size:9pt;
		}
		
		#page_container{
			border: 1px solid #000000;
			margin-top:30px;
			padding:10px;
		}
	</style>
	<script  type="text/javascript"  src="../libs/jquery-1.7.1.min.js"></script>
	<script>
	
		var xmlHttp;
		$(document).ready(function(){ 
			initEventListener();	
			initXMLHttpRequest();
		});
		
		// 버튼에 이벤트를 리스너를 등록합니다.
		function initEventListener(){
			$("button").click(function(e){ 
				// 버튼이 눌러지는 경우 페이지를 로딩합니다.
				loadPage($(this).attr("data"));
	
			});
		}
			
		
		// XMLHttpRequest를 미리 생성해 놓습니다.
		function initXMLHttpRequest(){
			// 1. 객체생성.
			xmlHttp = createXMLHTTPObject();
				
			// 2. 요청에 대한 응답처리 이벤트 리스너 등록
			xmlHttp.onreadystatechange=on_ReadyStateChange;
		}
		
		// 1. 브라우저에 따른 XMLHttpRequest생성하기.
		function createXMLHTTPObject(){
			var xhr = null;
			if (window.XMLHttpRequest) {
				// IE7버전 이상, Chrome, Safari, Firefox, opera등 거의 대부분의 브라우저에서는
				// XMLHttpRequest객체를 제공합니다.
				xhr = new XMLHttpRequest();
			}
			else {
				// IE6,IE5 버전에서는 아래와 같이 XMLHttpRequest객체를 생성해야 합니다.
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
				
			return xhr;
		}
		
		
		// 페이지를 로딩하는 함수입니다.
		function loadPage(strPage){
			// 3.서버로 보낼 데이터 생성.
			
			// 4. GET 방식으로 데이터 보내기, 응답은 비동기로 클라이언트<->서버간의 연결 요청준비.
			xmlHttp.open("GET", strPage);	
			// 5. 실제 데이터 전송.
			xmlHttp.send(null);		
		}
		
		
		// 6.응답처리.
		function on_ReadyStateChange(){
			// 4=데이터 전송 완료.(0=초기화전,1=로딩중,2=로딩됨,3=대화상태)
			if(xmlHttp.readyState==4){
				//200은 에러 없음.(404=페이지가 존재하지 않음)
				if(xmlHttp.status==200){
					// 서버에서 받은 값.
					alert("서버에서 받은 원본 데이터 : "+xmlHttp.responseText);
					
					//7. 데이터 파싱처리.
					addPage(xmlHttp.responseText);
				}
				else{
					alert("처리중 에러가 발생했습니다.");
				}
			}
		}
		
		
		//7.JSON 포멧 데이터 처리.
		function addPage(strInfo){
			$("#page_container").append(strInfo);
		}
		
	</script>
</head>

<body>
	<div >
		<button data="page1.html" >page1</button>
		<button data="page2.html" >page2</button> 
	</div>
	<div>
		동적으로 page1.html, page2.html파일을 읽어서 #panel_panel의 자식으로 추가해 주세요. 단 오직 한번씩만 추가되어야 합니다.
	</div>
    <div id="page_container">
  		이곳에 넣어주세요.
    </div>
</body>
</html>
